<template>
  <div>
    <van-nav-bar :left-text="getCurrentTime()" title="节日" fixed placeholder />
    <!--循环-->
    <div style="height: 40px"></div>
    <div :key="i" v-for="(item, i) in Festival">
      <div class="mk" :style="item.background" @click="bwl(i)">
        <div style="height: 18px; float: left; width: 95%"></div>
        <div>
          <div style="text-align: left; float: left">
            <a
              style="
                font-size: 20px;
                color: white;
                mline-height: 2em;
                margin: 20px;
              "
              >{{ item.name }}</a
            ><br />
            <a
              style="
                font-size: 12px;
                color: #e7e7e7;
                line-height: 2em;
                margin: 20px;
              "
              >{{ item.date }}</a
            ><br />
            <a style="font-size: 12px; color: #e7e7e7; margin: 20px">{{
              item.full
            }}</a>
          </div>
          <div style="text-align: right; float: right">
            <a style="font-size: 12px; color: white">{{ item.str1 }}&nbsp;</a>
            <a style="font-size: 20px; color: white">{{ item.str2 }}&nbsp;</a>
            <a style="font-size: 12px; color: white"
              >{{ item.str3 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a
            >
          </div>
        </div>
        <div style="height: 18px"></div>
      </div>
      <div style="height: 18px"></div>
    </div>
  </div>
</template>
<script>
import { getLunar } from "chinese-lunar-calendar";
import { NavBar } from "vant";
export default {
  //顶栏
  components: {
    [NavBar.name]: NavBar,
  },
  data() {
    return {
      date: new Date(), // 当前日期实例化
      // 模拟数据
      Analog: [
        {
          name: "六一儿童节",
          date: "2022-6-1",
          bw: "为了改善儿童的生活，为了反对虐杀儿童和毒害儿童而设立的节日",
          background: {
            // 背景图片地址
            backgroundImage: "url(" + require("../assets/festival/0.jpg") + ")",
            // 背景图片大小
            backgroundSize: "cover",
          },
        },
        {
          name: "端午节",
          date: "2022-6-3",
          bw: "端午节，是集拜神祭祖、祈福辟邪、欢庆娱乐和饮食为一体的民俗大节",
          background: {
            backgroundImage: "url(" + require("../assets/festival/1.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "七夕",
          date: "2022-8-4",
          bw: "七夕节既是拜祭七姐的节日，也是爱情的节日",
          background: {
            backgroundImage: "url(" + require("../assets/festival/2.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "中秋",
          date: "2022-9-10",
          bw: "中秋节有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息",
          background: {
            backgroundImage: "url(" + require("../assets/festival/3.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "国庆节",
          date: "2022-10-1",
          bw: "新中国成立的日子",
          background: {
            backgroundImage: "url(" + require("../assets/festival/4.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "重阳节",
          date: "2022-10-4",
          bw: "重阳节一般会包括出游赏景、登高远眺、观赏菊花、遍插茱萸、吃重阳糕、饮菊花酒等活动",
          background: {
            backgroundImage: "url(" + require("../assets/festival/5.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "腊八节",
          date: "2022-12-30",
          bw: "泡腊八蒜、吃腊八面、煮腊八粥、吃腊八豆腐",
          background: {
            backgroundImage: "url(" + require("../assets/festival/6.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "元旦",
          date: "2023-1-1",
          bw: "新一年的第一天",
          background: {
            backgroundImage: "url(" + require("../assets/festival/7.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "春节",
          date: "2023-1-22",
          bw: "在春节期间，全国各地均有举行各种贺岁活动",
          background: {
            backgroundImage: "url(" + require("../assets/festival/8.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "元宵节",
          date: "2023-2-5",
          bw: "元宵节，又称上元节、小正月、元夕或灯节，时间为每年农历正月十五",
          background: {
            backgroundImage: "url(" + require("../assets/festival/9.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "情人节",
          date: "2023-2-14",
          bw: "情人节，起源于基督教。如今已经成为全世界著名的浪漫节日，",
          background: {
            backgroundImage: "url(" + require("../assets/festival/2.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "愚人节",
          date: "2023-4-1",
          bw: "不要被骗噢",
          background: {
            backgroundImage:
              "url(" + require("../assets/festival/10.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "清明节",
          date: "2023-4-4",
          bw: "清明节，又称踏青节、行清节、三月节、祭祖节等",
          background: {
            backgroundImage:
              "url(" + require("../assets/festival/11.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "五一劳动节",
          date: "2023-5-1",
          bw: "一起参加劳动吧",
          background: {
            backgroundImage:
              "url(" + require("../assets/festival/12.jpg") + ")",
            backgroundSize: "cover",
          },
        },
      ],
      Festival: [],
    };
  },
  created() {
    // 每0.1秒更新一次日期
    this.timer = setInterval(this.getTime, 100);
  },
  methods: {
    //当前日期
    getTime() {
      // 更新当前日期变量
      this.date = new Date();
      this.Festival = this.getFestival();
    },

    // 获取农历日期
    getFullDate(date = this.date) {
      return getLunar(date.getFullYear(), date.getMonth() + 1, date.getDate())
        .dateStr;
    },

    // 获取新历日期
    getNewDate() {
      return (
        this.date.getFullYear() +
        "-" +
        (this.date.getMonth() + 1) +
        "-" +
        this.date.getDate()
      );
    },

    // 左上角当前时间
    getCurrentTime() {
      const hm = this.date.getHours() >= 12 ? "PM" : "AM";
      return (
        this.date.getHours() +
        ":" +
        this.date.getMinutes() +
        ":" +
        this.date.getSeconds() +
        " " +
        hm
      );
    },

    // 计算开始日期和结束日期差几天
    getBeginTime(begin, end) {
      const day =
        (new Date(end).getTime() - new Date(begin).getTime()) /
        (24 * 60 * 60 * 1000);
      return parseInt(day);
    },

    // 遍历节日
    getFestival() {
      const temp = [];
      this.Analog.forEach((item) => {
        // 传入当前日期， 第二个是节日日期， 节日日期 - 当前日期是负数是已过 N天，否则是还有N天
        const days = this.getBeginTime(this.getNewDate(), item.date);
        // 计算农历
        const full = this.getFullDate(new Date(item.date));
        var str1, str2, str3;
        if (days < 0) {
          str1 = "已过";
          str2 = -days;
          str3 = "天";
        } else if (days == 0) {
          str1 = "正是";
          str2 = "今天";
        } else {
          str1 = "还有";
          str2 = days;
          str3 = "天";
        }

        const strs = {
          name: item.name,
          date: item.date,
          bw: item.bw,
          days: days,
          full: full,
          str1: str1,
          str2: str2,
          str3: str3,
          background: item.background,
          time: item.date,
        };
        temp.push(strs);
      });
      return temp;
    },
    bwl(i) {
      this.$message({
        showClose: true,
        type: "success",
        message: this.Festival[i].bw,
        center: true,
      });
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
  },
};
</script>


<style scoped lang="less">
.mk {
  width: 80%;
  margin: 0px auto;
  border-radius: 10px;
  height: 110px;
}
</style>